<template>
  <div class="gender-product-page">
    <!-- 顶部信息卡片 -->
    <div class="info-card">
      <div class="info-content">
        <!-- 左侧图片 -->
        <div class="info-image">
          <img src="/banner2.jpg" alt="性别购买倾向分析" />
        </div>
        <!-- 右侧文字 -->
        <div class="info-text">
          <h2>
            📊 性别对电子产品的购买倾向分析 
            <span class="male-symbol">♂</span>
            <span class="female-symbol">♀</span>
          </h2>
          <p class="desc">
            在电子产品的消费市场中，性别差异往往会影响用户的购买偏好与消费习惯。
            男性消费者通常更注重产品的性能、配置以及性价比，对电脑、手机、音响设备等高性能电子产品的兴趣较大；
            而女性消费者则更容易受到产品外观设计、便携性与使用体验的影响，更倾向选择智能手机、平板电脑、耳机等兼顾时尚与实用的产品。
            <br /><br />
            随着电商平台与线上零售的发展，电子产品的购买行为逐渐向多样化和个性化演进。
            性别因素不再是唯一的决定性条件，但仍然能在消费趋势中呈现出显著的差异。
            例如，女性用户在智能穿戴设备、美妆科技产品上的接受度更高，而男性用户则在电脑配件、游戏设备等方面消费比例更大。
            <br /><br />
            本分析基于示例电商数据，从性别维度切入，统计了男性与女性在电子产品上的购买占比，
            希望能为市场研究与企业决策提供参考。通过对比两性在消费中的偏好，我们可以更好地理解目标用户群体，
            从而优化产品设计与市场投放策略。
          </p>
        </div>
      </div>
    </div>

    <!-- 图表卡片 -->
    <div class="chart-card">
      <div class="chart-container" ref="chartRef"></div>
      <p class="note">提示：此图展示电子类商品的性别购买占比及销售额</p>
    </div>

    <!-- 下载按钮 -->
    <div class="download-wrapper">
      <button class="download-btn" @click="downloadChart">下载图表文件</button>
    </div>

    <!-- 页面底部 Footer -->
    <FooterInfo />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import axios from 'axios'
import FooterInfo from '../components/FooterInfo.vue'

const chartRef = ref(null)
let chartInstance = null
const chartData = ref([])

// 请求接口获取性别销售数据
async function fetchGenderData() {
  try {
    const res = await axios.get('http://localhost:8080/queryGenderOfSales')
    if (res.data.code === 200) {
      chartData.value = res.data.data.map(item => ({
        name: item.sex === '男' ? '男性 ♂' : '女性 ♀',
        value: Number((item.proportion * 100).toFixed(2)), // 百分比保留两位小数
        totalSales: Number(item.totalSales)               // 总销售额
      }))
      updateChart()
    } else {
      alert('获取性别数据失败')
    }
  } catch (err) {
    console.error(err)
    alert('请求接口失败，请检查网络或接口地址')
  }
}

// 初始化图表
onMounted(async () => {
  await nextTick()
  const el = chartRef.value
  if (!el) return

  chartInstance = echarts.init(el)
  chartInstance.setOption({
    tooltip: { 
      trigger: 'item',
      formatter: params => {
        return `${params.name}<br/>占比: ${params.value.toFixed(2)}%<br/>销售额: ￥${(params.data.totalSales / 10000).toFixed(2)}万`
      }
    },
    legend: { top: '5%', textStyle: { color: '#333' } },
    series: [
      {
        name: '购买占比',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
        label: {
          show: true,
          formatter: params => `${params.name}: ${params.value.toFixed(2)}% (￥${(params.data.totalSales / 10000).toFixed(2)}万)`
        },
        data: [],
        color: ['#4a90e2', '#ff6f61']
      }
    ]
  })

  await fetchGenderData()
})

// 更新图表数据
function updateChart() {
  if (!chartInstance || !chartData.value.length) return
  chartInstance.setOption({
    series: [
      { data: chartData.value }
    ]
  })
}

// 下载图表
function downloadChart() {
  if (!chartInstance) return
  const url = chartInstance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' })
  const link = document.createElement('a')
  link.href = url
  link.download = 'gender-product-chart.png'
  link.click()
}
</script>

<style scoped>
.gender-product-page {
  max-width: 1000px;
  margin: 40px auto;
  font-family: 'Segoe UI', sans-serif;
}

/* 顶部信息卡片 */
.info-card {
  background: #fff;
  padding: 25px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 25px;
}

.info-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.info-image img {
  width: 240px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  margin-top: 70px;
}

.info-text {
  flex: 1;
}

.info-text h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.male-symbol {
  color: #4a90e2;
  font-size: 22px;
  margin-left: 6px;
}

.female-symbol {
  color: #ff6f61;
  font-size: 22px;
  margin-left: 4px;
}

.info-text .desc {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  text-align: justify;
}

/* 图表卡片 */
.chart-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 20px;
}

.chart-container {
  width: 100%;
  height: 400px;
}

.note {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-top: 10px;
}

/* 下载按钮 */
.download-wrapper {
  text-align: center;
  margin-bottom: 30px;
}

.download-btn {
  background: #ff7f50;
  color: #fff;
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s;
}

.download-btn:hover {
  background: #ff6333;
}
</style>
